<template>
  <div id="sidebar">
    <h3>{{ $t('menu.resource') }}</h3>
    <a-menu
      style="width: 200px"
      :selectedKeys="selectedKeys"
      :mode="mode"
      :theme="theme"
    >
      <a-menu-item key="/house/resource/list/source" style="padding-left:48px;">
        <router-link :to="{ name: 'HouseResourceListSource' }">
          <a-icon :component="iconHouseS" class="font12" v-show="sideStatus === '/house/resource/list/source'"/>
          <a-icon :component="iconHouseN" class="font12" v-show="sideStatus=== '/house/resource/list/store'"/>
          {{ $t('menu.HouseResourceList') }}
        </router-link>

      </a-menu-item>
      <!-- <a-menu-item key="/house/resource/list/store" style="padding-left:48px;" >
        <router-link :to="{ name: 'HouseResourceListStore' }">
          <a-icon :component="iconShopS" class="font12" v-show="sideStatus=== '/house/resource/list/store'"/>
          <a-icon :component="iconShopN" class="font12" v-show="sideStatus === '/house/resource/list/source'"/>
          {{ $t('menu.HouseResourceListStore') }}
        </router-link>
      </a-menu-item> -->
    </a-menu>
  </div>
</template>
<script>
import { iconHouseN, iconHouseS, iconShopN, iconShopS } from '@/core/icons'
export default {
  name: 'HouseResourceSide',
  data () {
    return {
      mode: 'inline',
      theme: 'light',
      iconHouseN,
      iconHouseS,
      iconShopN,
      iconShopS,
      sideStatus: '/house/resource/list/source', // 菜单栏图标样式
      selectedKeys: []
    }
  },
  methods: {
    updateMenu () {
      const routes = this.$route.matched.concat()
      const selRout = routes.pop().path
      this.selectedKeys = [ selRout ]
      this.sideStatus = selRout
    }
  },
  created () {
    this.updateMenu()
  },
  watch: {
    '$route' (val) {
      this.updateMenu()
    }
  }
}
</script>
<style lang="less" scoped>
#sidebar{
  width:200px;
  background-color: #fff;
  position: absolute;
  top:64px;
  left:0;
  bottom:0;
  z-index: 2;
  h3{
    font-size: 16px;
    padding-left:27px;
    padding-top:12px;
  }
  .font12{font-size:12px;vertical-align: 0;}
}
</style>
